<script setup>
import ChartLine from '@/components/chart/ChartLine.vue'
import { computed } from 'vue'

const props = defineProps({
  resultForm: Object,
  dataSource: Object,
  conclusionData: Object,
  legendState: Object
})

const descInfoData = [
  {
    label: '卫星名称',
    code: 'satelliteName',
    value: ''
  },
  {
    label: '检测时间',
    code: 'fractionTime',
    value: ''
  },
  {
    label: '参数代号',
    code: 'paramCode',
    value: ''
  },
  {
    label: '遥测时间',
    code: 'timeSlot',
    value: ''
  }
]
const computedDescInfoData = computed(() => {
  return descInfoData.map((item) => ({
    ...item,
    value: props.resultForm?.[item.code] ?? '' // 如果 key 不存在用空字符串
  }))
})

const descConclusionData = [
  {
    label: '趋势预测时间段',
    code: 'timeSlot',
    value: ''
  },
  {
    label: '趋势预测点数',
    code: 'count',
    value: ''
  }
]
const computedDescConclusionData = computed(() => {
  return descConclusionData.map((item) => ({
    ...item,
    value: props.conclusionData?.[item.code] ?? '' // 如果 key 不存在用空字符串
  }))
})
</script>

<template>
  <div class="fault-report">
    <div class="fault-report-info">
      <a-descriptions :data="computedDescInfoData" bordered size="large" :column="2" />
    </div>
    <div class="fault-report-chart" id="echartsDom">
      <chart-line
        :noBackground="true"
        :dataSource="dataSource"
        :chart-title="'数据分布图'"
        :title-color="'#333'"
        :title-size="'20px'"
        :chart-option="{
          grid: {
            right: '30px'
          },
          legend: {
            selected: {
              原始数据: true,
              预测数据: true,
              对比数据: props.legendState['对比数据']
            }
          }
        }"
      ></chart-line>
    </div>
    <div class="fault-report-conclusion">
      <a-descriptions title="结论" :data="computedDescConclusionData" bordered size="large" />
    </div>
  </div>
</template>

<style scoped lang="less">
.fault-report {
  height: 650px;
  width: 100%;
  overflow-y: auto;
  .fault-report-info {
    margin-bottom: 12px;
  }
  .fault-report-chart {
    height: calc(100% - 195px);
    width: 100%;
    padding-bottom: 12px;
  }
  .fault-report-conclusion {
    margin-top: 12px;
  }

  :deep(.arco-descriptions-item-label) {
    color: #000;
    font-weight: bold;
  }
}
</style>
